<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="http://img.baidu.com/js/tangram-base-core-1.3.9.js"></script>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=1.2"></script>
<style type="text/css">
	#the-map,#static-map{
		border: 1px solid #999;
		margin: 5px;
		float:left;
	}
	#parameters{
		clear:both;
		font-size:12px;
		width:80%;
	}
</style>
<script type="text/javascript">
    //window.onload = function() {

    //window.resizeTo(900, 700);

    //window.moveTo((window.screen.availWidth - 900) / 2, (window.screen.availHeight - 700) / 2 - 50);
    //}
</script>
<title>静态地图生成助手</title>
</head>
<body>
<h1>百度地图静态地图生成助手</h1>
  <div id="maps">
	<div id="the-map" style="width:400px;height:300px;float:left">
	</div>
	<div id="static-map" style="position:relative">
		<span id="loading" style="display:block;position:absolute;left:5px;top:5px;color:#333;font-weight:bold">正在加载...</span>
		<img id="static-map-img" src=" http://api.map.baidu.com/staticimage?center=北京" alt="static map"/>
	</div>
  </div>
  <div>
	<table id="parameters">
	  <tr>
		<td>参数名</td>
		<td>参数</td>
		<td>说明</td>
	  </tr>
	  <tr>
		<td>地图中心</td>
		<td><input id="map-center" type="text" style="width:100px" value="北京"/>（输入城市名称或经纬度）</td>
		<td><input id="set-center" type="button" value="设置"/></td>
	  </tr>
	  <tr>
		<td>宽高</td>
		<td>
			<input id="map-width" type="number" style="width:49px" value="400"/>
			<input id="map-height" type="number" style="width:49px" value="300"/></td>
		<td><input type="button" value="设置"/></td>
	  </tr>
	  <tr>
		<td>当前标注</td>
		<td>尺寸
			<select id="marker-size" name="marker-size">
				<option value=""></option>
				<option value="s" selected="selected">小</option>
				<option value="m">中</option>
				<option value="l">大</option>
			</select>
			编号
			<select id="marker-label" name="marker-size">
				<option value="" selected="selected"></option>
				<option value="0">0</option>
				<option value="1">1</option>
				<option value="2">2</option>
				<option value="3">3</option>
				<option value="4">4</option>
				<option value="5">5</option>
				<option value="6">6</option>
				<option value="7">7</option>
				<option value="8">8</option>
				<option value="9">9</option>
				<option value="a">a</option>
				<option value="b">b</option>
				<option value="c">c</option>
				<option value="d">d</option>
				<option value="e">e</option>
				<option value="f">f</option>
				<option value="g">g</option>
				<option value="h">h</option>
				<option value="i">i</option>
				<option value="j">j</option>
				<option value="k">k</option>
				<option value="l">l</option>
				<option value="m">m</option>
				<option value="n">n</option>
				<option value="o">o</option>
				<option value="p">p</option>
				<option value="q">q</option>
				<option value="r">r</option>
				<option value="s">s</option>
				<option value="t">t</option>
				<option value="u">u</option>
				<option value="v">v</option>
				<option value="w">w</option>
				<option value="x">x</option>
				<option value="y">y</option>
				<option value="z">z</option>
			</select>
		</td>
		<td>
			<input id="delete-marker" type="button" value="删除"/>
		</td>
	  </tr>
      <tr>
        <td></td>
        <td style="font-size:14px;font-weight:bold;color:red">（右键点击左边的地图可以添加标注！）</td>
        <td></td>
      </tr>
	  <tr style="display:none">
        <td>复制右边代码即可</td>
		<td colspan="2"><textarea id="result-url" style="height:40px;width:90%;display:none" type="text"></textarea></td>
	  </tr>	
	</table>
  </div>
  <script type="text/javascript">
      function __setbaidumap() {
          alert(document.getElementById("result-url").innerText);
          window.opener.document.getElementById("baidumap").value = document.getElementById("result-url").innerText;
          window.close();
      
      }
  
	(function(G){
		var URL_BASE = "http://api.map.baidu.com/staticimage";
		
		//get element by id with cache
		var $ = {
			_cache : {},
			G : function(id){
				var dom = this._cache[id];
				if(dom)return dom;
				this._cache[id] = dom = T.G(id);
				return dom;
			}
		};
		
		//markers and current marker
		var $markers = [],$curMarker;
		
		//static image url generate function
		function getStaticImgUrl(map){
			var params = [];//parameter array
			var width = $.G("map-width").value,
				height = $.G("map-height").value;
			if(width && width>0){
				var w = parseInt(width);
				if(!isNaN(w)){
					params.push("width="+width);
					$.G("the-map").style.width = width+"px";
				}
			}
			if(height && height>0){
				var h = parseInt(height);
				if(!isNaN(h)){
					params.push("height="+height);
					$.G("the-map").style.height = height+"px";
				}
			}
			
			var center = map.getCenter();
			var c = center.lng+","+center.lat;
			params.push("center="+c);
			$.G("map-center").value = c;	
			
			var zoom = map.getZoom();
			params.push("zoom="+zoom);
			
			var markers = [],styles = [];
			for(var i = 0;i<$markers.length;++i){
				var mk = $markers[i];
				markers.push(mk.point.lng+","+mk.point.lat);
				styles.push(mk.size+","+(mk.label || ""));
			}
			if(markers.length>0){
				params.push("markers="+markers.join("|"));
			}
			if(styles.length>0){
				params.push("markerStyles="+styles.join("|"));
			}
			return URL_BASE + "?" + params.join("&");
		}
		
		//the non-static map
		var map = new BMap.Map("the-map");
		map.enableScrollWheelZoom();
		//the static map image tag
		var img = $.G("static-map-img");
		//hide "loading..." after static map image loaded
		img.onload = function(){
			$.G("loading").style.display = "none";
		};
		map.addEventListener("zoomend",function(){
			if(map.getZoom()>18){
				alert("静态图最大只支持18级");
				map.setZoom(18);
			}
		});
		
		//map width and height
		T.on($.G("map-width"),"change",onChange);
		T.on($.G("map-height"),"change",onChange);
		
		//set map center button
		T.on($.G("set-center"),"click",function(){
			var c = $.G("map-center").value;
			if(c.indexOf(",")!=-1 && c.match(/[0-9.,]+/)){
				var latlng = c.split(",");
				c = new BMap.Point(parseFloat(latlng[0]),parseFloat(latlng[1]));
			}
			map.setCenter(c);
		});
		
		//navigation control
		var navCtrl = new BMap.NavigationControl();
		map.addControl(navCtrl);
		navCtrl.hide();
		
		//hide navi control when mouse out map
		//and show navi control when mouse over map
		T.on($.G("the-map"),"mouseover",function(){
			navCtrl.show();
		});
		T.on($.G("the-map"),"mouseout",function(){
			navCtrl.hide();
		});
		
		//request new static image when any option changed
		function onChange(){
			var point = map.getCenter();
			var url = getStaticImgUrl(map);
			$.G("loading").style.display = "block";
			img.src = url;
			T.G("result-url").value = url;
		}
		map.addEventListener("moveend",onChange);
		map.addEventListener("zoomend",onChange);
		
		function onMarkerClick(e){
			var mk = $curMarker = e.target;
			if(mk==undefined)return;
			$.G("marker-size").value = mk.size;
			$.G("marker-label").value = mk.label;
		}
		
		function deleteMarker(e){
			if($curMarker===undefined)return;
			$markers.splice($curMarker.index,1);
			map.removeOverlay($curMarker);
			onChange();
		}
		
		function onMarkerOptChange(){
			$curMarker.size = $.G("marker-size").value;
			$curMarker.label = $.G("marker-label").value;
			onChange();
		}
		
		T.on($.G("marker-size"),"change",onMarkerOptChange);
		T.on($.G("marker-label"),"change",onMarkerOptChange);
		T.on($.G("delete-marker"),"click",deleteMarker);
		
		//map context menu
		var menu = new BMap.ContextMenu();
		
		//add marker menu item
		var itemAdd = new BMap.MenuItem("增加标注",function(e){
			if($markers.length===20){
				alert("最多增加20个标注!");
				return;
			}
			var mk = new BMap.Marker(e);
			mk.label = $markers.length.toString(36);
			mk.size = "l";
			mk.index = $markers.length;
			mk.addEventListener("click",onMarkerClick);
			map.addOverlay(mk);
			$markers.push(mk);
			$curMarker = mk;
			onMarkerClick({target:mk});
			onChange();
		});
		menu.addItem(itemAdd);
		
		//clear all markers menu item
		itemClear = new BMap.MenuItem("清除所有标注",function(e){
			map.clearOverlays();
			$markers.length = 0;
			onChange();
		});
		menu.addItem(itemClear);
		map.addContextMenu(menu);
		
		map.centerAndZoom($.G("map-center").value);
	})(window);
  </script>
</body>
</html>